<template>
  <div class="app-container">
    <!--基础设置-->
    <el-card class="box-card">
      <div slot="header">
        <span>基础设置</span>
      </div>
      <div class="form-container">
        <div>
          开启会员等级自动升级
          <el-switch
            v-model="memberConfigInfo.open_auto_upgrade"
            :active-value="1"
            :inactive-value="0"/>
        </div>
        <div>
          商品开启不同等级可见
          <el-switch
            v-model="memberConfigInfo.open_commodity_visible"
            :active-value="1"
            :inactive-value="0"/>
        </div>
      </div>
    </el-card>
    <!--成长任务-->
    <el-card class="box-card">
      <div slot="header">
        <span>成长任务</span>
      </div>
      <div class="form-container">
        <div>
          分享1次宝贝获得
          <el-input v-model="memberConfigInfo.share_value" size="mini" class="member-input" />
          成长值，每天最多可获得
          <el-input v-model="memberConfigInfo.share_max_value" size="mini" class="member-input"/>
          成长值
        </div>
        <div>
          邀请1名好友注册获得
          <el-input v-model="memberConfigInfo.invitation_value" size="mini" class="member-input"/>
          成长值
        </div>
        <div>
          签到1次获得
          <el-input v-model="memberConfigInfo.sign_value" size="mini" class="member-input"/>
          成长值
        </div>
        <div>
          每完成一笔订单获得
          <el-input v-model="memberConfigInfo.order_value" size="mini" class="member-input"/>
          成长值
        </div>
      </div>
    </el-card>
    <!-- 成长规则设置 -->
    <el-card class="box-card">
      <div slot="header">
        <span>成长规则</span>
      </div>
      <div class="form-container">
        <el-table v-loading="loading" ref="table" :data="memberConfigInfo.grade_list" size="small" style="width: 100%;">
          <el-table-column label="会员等级" prop="grade" align="center" />
          <el-table-column label="会员名称" prop="name" align="center" />
          <el-table-column label="所需成长值" align="center">
            <template slot-scope="scope">
              {{ scope.row.growth_value > 0 ? scope.row.growth_value : '' }}
            </template>
          </el-table-column>
          <el-table-column label="会员权益" align="center">
            <template slot-scope="scope">
              {{ scope.row.equity > 0 ? (scope.row.equity / 100) + '折' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!--默认所有等级都为空上一等级保存成功后，下一等级才可编辑-->
              <!--也就是说 1.name不为空，可以编辑 2.找到name为空的第一位可以编辑-->
              <!-- false: 可以编辑 、 true ： 不能编辑 -->
              <el-button :disabled="scope.row.name || scope.$index === isEdit ? false : true" type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <e-form ref="form"/>
    <el-card class="box-card" style="text-align: center;">
      <el-button size="small" @click="resetInfo">取消</el-button>
      <el-button :loading="saveLoading" type="primary" size="small" @click="doSubmit">保存</el-button>
    </el-card>
  </div>
</template>

<script>
import { getMemberConfig, updateMemberConfig } from '@/api/mall/memberConfig'
import eForm from './form'
export default {
  name: 'Index',
  components: { eForm },
  mixins: [],
  data() {
    return {
      loading: true,
      saveLoading: false,
      isEdit: 0, // 等级能够编辑的起始位
      memberConfigInfo: {
        open_commodity_visible: 0, // 商品开启不同等级可见
        open_auto_upgrade: 0, // 开启会员等级自动升级
        share_value: 0, // 分享获得成长值
        share_max_value: 0, // 分享每天最多可获得成长值
        invitation_value: 0, // 邀请注册获得成长值
        sign_value: 0, // 签到获得成长值
        order_value: 0, // 每笔订单获得成长值
        grade_list: [] // 会员等级
      }
    }
  },
  created() {
    // 获取会员设置信息，因为等级（表格）只是会员设置的子集，所以这里单独请求
    this.getMemberConfigInfo()
  },
  methods: {
    getMemberConfigInfo() {
      getMemberConfig().then(res => {
        this.memberConfigInfo = res.result
        this.loading = false
        this.isEditIndex()
      })
    },
    isEditIndex() {
      // 这里用for of 且用局部变量 i 。是因为用其他的遍历方法不能正确拿到下标
      let i = 0
      for (const item of this.memberConfigInfo.grade_list) {
        if (!item.name) {
          break
        }
        i += 1
      }
      this.isEdit = i
    },
    edit(info) {
      const _this = this.$refs.form
      _this.dialog = true
      // 使修改内容在保存之前不触动主页面修改
      _this.form = Object.assign({}, (info))
      _this.form.equity = _this.form.equity / 100
    },
    editCallBack(info) {
      const newList = []
      // 修改完之后的回调，更改当前变更的信息。从新定义新的数组是为了：防止数据污染
      this.memberConfigInfo.grade_list.map(item => {
        if (item.uuid === info.uuid) {
          newList.push(info)
        } else {
          newList.push(item)
        }
      })
      // 新的数组
      this.memberConfigInfo.grade_list = newList
      // 获取等级列表第一个为空的下标
      this.isEditIndex()
    },
    doSubmit() {
      this.saveLoading = true
      updateMemberConfig(this.memberConfigInfo).then(res => {
        if (res) {
          this.$notify({ title: '更新成功', type: 'success', duration: 2500 })
          this.resetInfo()
        } else {
          this.$message({ message: '更新失败，请稍后重试', type: 'warning' })
        }
      })
    },
    resetInfo() {
      // 重置表单，刷新页面
      window.location.reload()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .form-container {
    width: 90%;
  }
  .box-card {
    margin-bottom: 10px;
  }
  .el-card__body {
    padding: 20px 20px 0 20px!important;
  }
  .member-input {
    width: 80px !important;
    margin: 0 5px;
  }
  .form-container div {
    font-size: 13px;
    color: #82848a;
    margin-bottom: 5px;
  }
</style>
